/*
*******************************************************************************************************
# サブエリア共通スタイル - compiled from sub_box.scss
*******************************************************************************************************
*/

// サブエリア
//
// #### export to sub_box.css
// ※このページでは表示が完全に再現されず、部分的に崩れている場合があります。  
// ※class名やデザインの参考まで
//
// Styleguide 10.0

// /* --------------------------------------------------
//		import core
// -------------------------------------------------- */
// compassのコア機能
@import "core";

// 基本ボックス→検索結果ページなど
//
// .mod_box_sub - sample
//
// Markup:
// <section class="mod_box_sub">
// <div class="box_title">
// <a href="javascript: void(0);">
// <h2 class="ttl_sub_icon ttl_shop">取り扱いショップ</h2>
// <span class="icn_minus">閉じる</span>
// </a>
// </div>
// </section>
//
// Styleguide 10.1

// 地域・駅のリスト→検索結果ページなど
//
// .list_arealine - sample
//
// Markup:
// <section class="mod_box_sub">
// <div class="box_title">
// <a href="javascript: void(0);">
// <h2 class="ttl_sub_icon ttl_station">路線・駅</h2>
// <span class="icn_minus">閉じる</span>
// </a>
// </div>
// <section class="box_content">
// <h3 class="ttl_arealine">京王線京王線京王線京王線京王線</h3>
// <ul class="list_arealine">
// <li>笹塚</li>
// <li>下高井戸下高井戸下高井戸下高井戸</li>
// <li>明大前</li>
// </ul>
// </section>
// </section>
//
// Styleguide 10.2

/* ------------------------------------
	* mod_box_sub
* ------------------------------------ */
div#wrapper {
	margin-top: -6px;
	padding-top: 6px;
	@include clearfix;
}

#contentSubColumn {
	.btn_save {
		.mod_btn_all {
			padding-top: 19px;
			padding-bottom: 19px;
			padding-right: 14px;
			font-size: 18px;
			text-align: right;

			&:hover {
				color: $textColor;
			}

			@include hack(6) {
				width: 222px;
			}
			@include hack(7) {
				width: 222px;
			}
		}
	}

	.bear_save {
		display: block;
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 89px;
		height: 68px;
		background-image: url(/shared/images/sub_box/bear_save.png);
		background-repeat: no-repeat;
		background-position: 0px 0px;
	}

	.btn_consult {
		margin-top: 10px;

		.mod_btn_all {
			padding-top: 15px;
			padding-bottom: 15px;
		}
	}

	.btn_research {
		$c: #ffc4e5;

		border-bottom: 1px solid #f1b1d5;
		@include border-radius(10px);
		margin: 18px -12px;
		margin-bottom: 0px;
		padding: 14px 12px;
		position: relative;
		background-color: $c;

		&:after {
			margin-left: -8px;
			border: 8px solid transparent;
			border-bottom-color: $c;
			position: absolute;
			left: 50%;
			top: -16px;
			width: 0;
			height: 0;
			content: "";
		}

		.mod_btn_all {
			padding-top: 17px;
			padding-bottom: 17px;
		}
	}
}

.mod_box_sub {
	$radius: 16px;

	margin-top: 20px;
	border: 6px solid #d4d6d9;
	@include border-radius($radius);
	width: 228px;
	overflow: hidden;
	background-color: #fff;

	&:first-child {
		margin-top: 0px;
	}

	.box_title {
		position: relative;

		a {
			position: relative;
			display: block;
			text-decoration: none;
			cursor: pointer;
		}
	}

	.ttl_sub, .ttl_sub_icon {
		padding: 15px 0;
		padding-left: 14px;
		@include border-top-left-radius($radius - 8);
		@include border-top-right-radius($radius - 8);
		color: #fff;
		background-color: $bgColorBlue;
		background-repeat: no-repeat;
		font-size: $fontSizeL;
	}
	.ttl_sub_icon {
		padding-left: 58px;
	}
	.ttl_shop {
		background-image: url(/shared/images/icon/icn_shop.png);
		background-position: 3px 4px;
	}
	.ttl_area {
		background-image: url(/shared/images/icon/icn_area.png);
		background-position: 7px 4px;
	}
	.ttl_station {
		background-image: url(/shared/images/icon/icn_station.png);
		background-position: 11px 6px;
	}
	.ttl_basic {
		background-image: url(/shared/images/icon/icn_basic.png);
		background-position: 11px 4px;
	}

	.list_text {
		li {
			padding: 16px 14px 12px;
			border-top: 1px solid #e3e3e3;

			&:first-child {
				border-top: none;
			}
		}
	}

	.btn_action {
		padding-top: 10px;
		padding-bottom: 11px;
		border-top: 1px solid #e3e3e3;
		@include border-bottom-left-radius($radius - 8);
		@include border-bottom-right-radius($radius - 8);
		display: block;
		background-color: $bgColorGray;
		text-align: center;
		cursor: pointer;
	}

	.list_btn_action {
		@include clearfix;

		li {
			float: left;

			&.left {
				width: 114px;

				.btn_action {
					@include border-bottom-left-radius($radius - 8);
					@include border-bottom-right-radius(0);
				}
			}

			&.right {
				border-left: 1px solid #e3e3e3;
				width: 113px;

				.btn_action {
					@include border-bottom-left-radius(0);
					@include border-bottom-right-radius($radius - 8);
				}
			}
		}
	}

	.icn_minus, .icn_plus {
		position: absolute;
		right: 10px;
		top: 15px;
		display: block;
		width: 16px;
		height: 16px;
		overflow: hidden;
		background-repeat: no-repeat;
		background-position: 0px 0px;
		text-indent: 100%;
		white-space: nowrap;
	}
	.icn_minus {
		background-image: url(/shared/images/icon/icn_minus.png);
	}
	.icn_plus {
		background-image: url(/shared/images/icon/icn_plus.png);
	}

	.box_content {
		padding: 16px 14px;
	}

	.mod_list_input {
		padding: 3px 0;

		li {
			margin-top: 9px;
			padding-right: 0px;
			width: 100%;

			&:first-child {
				margin-top: 0;
			}

			@include hack(6) {
				margin-top: 5px;
			}
			@include hack(7) {
				margin-top: 5px;
			}
		}
	}

	.ttl_arealine {
		margin-bottom: 8px;
		line-height: 1.3;
		font-weight: bold;
	}

	.list_arealine {
		line-height: 1.3;

		li {
			margin: 8px 0;
			padding-left: 28px;
			background-image: url(/shared/images/icon/icn_arealine.png);
			background-repeat: no-repeat;
			background-position: 14px 0px;

			&.last {
				background-image: url(/shared/images/icon/icn_arealine_last.png);
			}
		}
	}

	.box_dot {
		border-bottom: 2px dotted #ccc;
		margin-top: 24px;
		margin-bottom: 20px;
		padding-bottom: 12px;
	}

	.list_btn_type {
		margin-right: -10px;
		margin-bottom: 20px;
		@include clearfix;

		li {
			margin-right: 10px;
			float: left;
			width: 60px;

			@include hack(6) {
				margin-right: 6px;
				width: 56px;
				height: 24px;
			}
			@include hack(7) {
				width: 56px;
			}

			.mod_btn {
				padding: 17px 0;
				background-repeat: no-repeat;
				background-position: 50% 50%;

				@include hack(6) {
					width: 56px;
					height: 24px;
				}
				@include hack(7) {
					width: auto;
				}
			}

			.active {
				border-color: $borderColorPink;
				background-color: $bgColorPink;

				&:hover {
					@include opacity(1);
				}

				&:before {
					content: normal;
				}
			}

			span {
				display: block;
				text-indent: 100%;
				white-space: nowrap;
				overflow: hidden;

				@include hack(6) {
					text-indent: -9999px;
				}
			}
		}

		.single {
			.mod_btn {
				background-image: url(/shared/images/icon/icn_btn_single.png);
			}
			.active {
				background-image: url(/shared/images/icon/icn_btn_single_active.png);
			}
		}
		.double {
			.mod_btn {
				background-image: url(/shared/images/icon/icn_btn_double.png);
			}
			.active {
				background-image: url(/shared/images/icon/icn_btn_double_active.png);
			}
		}
		.family {
			.mod_btn {
				background-image: url(/shared/images/icon/icn_btn_family.png);
			}
			.active {
				background-image: url(/shared/images/icon/icn_btn_family_active.png);
			}
		}
	}

	.list_checkbox2 {
		li {
			padding-right: 0px;
			float: left;
			width: 50%;

			&:first-child {
				float: none;
				width: 100%;
			}
		}
	}

	.box_append {
		margin-top: 22px;
		margin-bottom: 23px;
		padding: 15px 24px 9px;
		position: relative;
		background-color: $bgColorGray;

		&:after {
			margin-left: -8px;
			border: 8px solid transparent;
			border-bottom-color: $bgColorGray;
			position: absolute;
			left: 50%;
			top: -16px;
			width: 0;
			height: 0;
			content: "";
		}

		.mod_list_input {
			color: $textColorBlue;
			font-size: $fontSizeL;
			font-weight: bold;
		}

		.mod_checkbox {
			top: 0;
		}
	}

	.mod_checked {
		.mod_list_input {
			color: $textColorPink !important;
		}

		&:after {
			border-bottom-color: $bgColorPinkChecked;
		}
	}
}


// 地域選択の2段目折りたたみ→検索結果ページなど
//
// .mod_box_area_child - sample
//
// Markup:
// <section class="mod_box_sub">
// <div class="box_title">
// <a href="javascript: void(0);">
// <h2 class="ttl_sub_icon ttl_area">地域</h2>
// <span class="icn_minus">閉じる</span>
// </a>
// </div>
// <section class="box_content">
// <h3 class="ttl_arealine">東京都</h3>
// <section class="mod_box_area_child">
// <div class="box_ttl_child">
// <a href="javascript: void(0);">
// <h4 class="ttl_area_child">渋谷区</h4>
// <span class="icn_minus">閉じる</span>
// </a>
// </div>
// <ul class="list_arealine">
// <li>恵比寿東</li>
// <li class="last">恵比寿西</li>
// </ul>
// </section>
// <section class="mod_box_area_child">
// <div class="box_ttl_child">
// <a href="javascript: void(0);">
// <h4 class="ttl_area_child">世田谷区</h4>
// <span class="icn_minus">閉じる</span>
// </a>
// </div>
// <ul class="list_arealine">
// <li>恵比寿南</li>
// <li class="last">恵比寿西</li>
// </ul>
// </section>
// </section>
// <ul class="list_btn_action">
// <li class="left"><a href="javascript: void(0);" class="btn_action mod_link_blue">追加・削除</a></li>
// <li class="right"><a href="#dummy" class="btn_action mod_link_blue">町名を選択</a></li>
// </ul>
// </section>
//
// Styleguide 10.3

/* ------------------------------------
	* mod_box_area_child
* ------------------------------------ */
.mod_box_area_child {
	margin-top: 1px;

	.box_ttl_child {
		position: relative;
		background-color: $bgColorGray;

		a {
			padding: 6px 10px;
			padding-right: 24px;
			position: relative;
			display: block;
			color: $textColor;
			text-decoration: none;
			cursor: pointer;
		}
	}

	.ttl_area_child {
		line-height: 1.3;
	}

	.icn_minus, .icn_plus {
		right: 6px;
		top: 6px;
	}
	.icn_minus {
		background-image: url(/shared/images/icon/icn_minus_child.png);
	}
	.icn_plus {
		background-image: url(/shared/images/icon/icn_plus_child.png);
	}

}


// アパマンショップ→検索結果ページなど
//
// .box_shop - sample
//
// Markup:
// <section class="mod_box_sub_apaman">
// <div class="box_content">
// <div class="wrapper_shop">
// <section class="box_shop">
// <h3 class="name">アパマンショップ<span>吉祥寺店</span></h3>
// <p class="pic"><img src="/shared/images/dummy/pic_sub_apaman.jpg" alt="アパマンショップ 吉祥寺店" width="194" height="144" /></p>
// <p class="tel"><span>無料</span><br />0120-00-0000</p>
// <ul class="list_detail">
// <li class="shop_number">[店舗番号]<br />吉祥寺店：123456</li>
// <li>受付：10:00〜19:00</li>
// <li>定休日：水曜</li>
// <li>東京都武蔵野市吉祥寺本町2丁目1-12公社第3ビル2階</li>
// </ul>
// <p><a href="#dummy" class="mod_btn mod_btn_green">詳細</a></p>
// </section>
// </div>
// </div>
// </section>
//
// Styleguide 10.4

/* ------------------------------------
	* mod_box_sub_apaman
* ------------------------------------ */
.mod_box_sub_apaman {
	$radius: 16px;

	margin-top: 30px;
	width: 240px;

	.box_content {
		margin-bottom: 18px;
		padding: 14px;
		padding-bottom: 18px;
		@include border-radius($radius);
		background-color: #fff;
	}

	.ttl_shop {
		margin: 0 -10px;
		margin-top: -10px;
		padding: 8px 0px;
		@include border-top-radius($radius);
		color: #fff;
		background-color: #378900;
		text-align: center;
	}

	.wrapper_shop {
		padding: 0 6px;
	}

	.box_shop {
		margin-top: 16px;
		padding-top: 16px;
		border-top: 2px dotted #ccc;
		line-height: $lineHeight;

		&:first-child {
			margin-top: 0;
			border-top: none;
		}

		.name {
			span {
				display: block;
				font-size: 20px;
				font-weight: bold;
			}
		}

		.pic {
			margin-top: 16px;
			margin-bottom: 10px;
			text-align: center;

			img {
				padding: 2px;
				border: 1px solid #c4c4c4;
				@include border-radius(4px);
			}
		}

		.tel {
			line-height: $lineHeightS;
			color: $textColorGreen;
			font-size: 24px;
			font-weight: bold;

			span {
				padding: 0px 6px;
				padding-top: 2px;
				padding-bottom: 1px;
				@include border-radius($radius);
				@include inline-block;
				vertical-align: top;
				color: #fff;
				background-color: $textColorGreen;
				font-size: $fontSizeL;
			}
		}

		.list_detail {
			margin-top: 8px;
			margin-bottom: 14px;

			.shop_number {
				color: $textColorGreen;
			}
		}
	}

	.mod_link_apaman {
		font-size: $fontSizeL;
	}
}


// 条件の2段目折りたたみ→検索結果ページなど
//
// .mod_box_sub_child - sample
//
// Markup:
// <section class="mod_box_sub">
// <div class="box_title">
// <a href="javascript: void(0);">
// <h2 class="ttl_sub_icon ttl_basic">基本条件</h2>
// <span class="icn_minus">閉じる</span>
// </a>
// </div>
// <section class="mod_box_sub_child">
// <div class="box_title">
// <a href="javascript: void(0);">
// <h3 class="ttl_sub_child">築年数</h3>
// <span class="icn_minus">閉じる</span>
// </a>
// </div>
// <div class="box_content">
// <ul class="list_select">
// <li>
// <select name="" id="">
// <option value="" selected="selected">選択</option>
// </select></li>
// </ul>
// </div>
// </section>
// <section class="mod_box_sub_child">
// <div class="box_title">
// <a href="javascript: void(0);">
// <h3 class="ttl_sub_child">駅徒歩</h3>
// <span class="icn_minus">閉じる</span>
// </a>
// </div>
// <div class="box_content">
// <ul class="list_select mb24">
// <li>
// <select name="" id="">
// <option value="" selected="selected">選択</option>
// </select></li>
// </ul>
// </div>
// </section>
// </section>
//
// Styleguide 10.5

/* ------------------------------------
	* mod_box_sub_child
* ------------------------------------ */
.mod_box_sub_child {
	select {
		width: 100%;
	}

	.ttl_sub_child {
		padding: 12px 14px;
		border-bottom: 1px solid #92a0b7;
		color: #fff;
		background-color: $bgColorUsuBlue;
		font-size: $fontSizeL;
	}

	.icn_minus, .icn_plus {
		top: 12px;
	}

	.list_select {
		li {
			margin-top: 10px;

			&:first-child {
				margin-top: 0;
			}
		}
	}
}

/* ------------------------------------
	* appendContainerWrapper
* ------------------------------------ */
div#container {
	padding-bottom: 80px + 80;

	@include hack(6) {
		padding-bottom: 80px;
	}
}

div#appendContainerWrapper {
	padding: 16px 0px;
	position: fixed;
	bottom: 150px;
	height: 80px - 2 - 16 * 2;

	div#appendContainer {
		padding-bottom: 0px;
	}

	.mod_btn_research {
		padding-left: 32px;
		border-right: 2px dotted #ccc;
		float: left;
		width: 250px;

		.mod_btn_all {
			padding-top: 8px;
			padding-bottom: 8px;
			width: 200px;
		}
	}

	.mod_btn_append {
		margin-top: 0;
		overflow: hidden;

		.text {
			font-weight: normal;
		}

		.mod_btn_all {
			padding-top: 11px;
			padding-bottom: 11px;
			width: 200px;
			vertical-align: middle;
			font-size: 16px;
		}
	}
}

